<template>
	<view class="home">
		<view class="top">
			<text class="top-day">距26考研还有{{day}}天</text>
			<view class="carousel">
				<view class="carousel-row1">
					<text class="carousel-text">梦想照进现实</text>
					<text class="carousel-text">努力成就未来</text>
					<text class="carousel-text">考研的道路上，愿你不忘初心，砥砺前行</text>
					<text class="carousel-text">考研之路固然艰难，但坚持下去，你会发现它也是一段美好的旅程</text>
					<text class="carousel-text">这段经历将成为你人生中宝贵的财富，激励你在以后的道路上勇往直前</text>
					<text class="carousel-text">没有什么能够阻挡你的梦想，包括考研这一关</text>
					<text class="carousel-text">信心满满地备考，全力以赴地考试，你的付出定会换来辉煌的成绩</text>
					<text class="carousel-text">知识有无穷的力量，考研能开启全新的世界，愿你在学习的路上永不停息，成就非凡未来</text>
					<text class="carousel-text">你的努力，你的坚持，你的拼搏，都会在考研路上开花结果</text>
					<text class="carousel-text">相信自己，你能行</text>
				</view>
				<view class="carousel-row2">
					<text class="carousel-text">不要害怕失败，因为失败只是通向成功的必经之路</text>
					<text class="carousel-text">在考研的道路上，坚持到底，你会发现，成功就在眼前</text>
					<text class="carousel-text">梦想的道路上总充满荆棘，但坚持与努力终将开辟新的天地</text>
					<text class="carousel-text">考研路上，愿你勇往直前，取得成功</text>
					<text class="carousel-text">不要害怕失败，因为失败是成功的垫脚石</text>
					<text class="carousel-text">当你付出所有努力后，无论结果如何，你都已经赢得了自己的胜利</text>
					<text class="carousel-text">祝你考研顺利，前程似锦</text>
					<text class="carousel-text">勇往直前，无畏挑战</text>
					<text class="carousel-text">在考研的路上，挖掘自我，锻炼意志，让每一次奋斗都成为你前行的动力</text>
					<text class="carousel-text">知识改变命运，考研成就未来，让我们带着梦想上路，不负时光不负自己</text>
				</view>
			</view>
		</view>
	
		<view class="body">
			<view class="body-top">
				<view class="body-top-left">
					<view class="text-title">
						学习天数
					</view>
					<view class="text-content">
						<text class="number">{{userInfo.day}}</text><text class="unit">天</text>
					</view>
				</view>
				<view class="body-top-middle">
					<view class="text-title">
						做题数量
					</view>
					<view class="text-content">
						<text class="number">{{userInfo.done}}</text><text class="unit">道</text>
					</view>
				</view>
				<view class="body-top-right">
					<view class="text-title">
						正确率
					</view>
					<view class="text-content">
						<text class="number">{{userInfo.correct == 0 ? 0 : (userInfo.correct * 100 / userInfo.done).toFixed(0)}}</text><text class="unit">%</text>
					</view>
				</view>
			</view>
			<view class="body-content">
				<view class="famous-teachers" @click="goStrengthen">
					<view class="img">
						<image src="../../static/bookindex.png" mode=""></image>
					</view>
					<view class="famous-teacher-title">
						名师强化题库
					</view>
					<view class="famous-teacher-detail">
						市面上名师强化题，有详细解析
					</view>
					<view class="famous-teacher-button">
						去做题
					</view>
				</view>
				<view class="body-middle">
					<view class="prediction" @click="goWritingList">
						
						<view class="prediction-title">
							真题
						</view>
						<view class="prediction-detail">
							汇聚历年真题，有详细解析
						</view>
						<view class="prediction-button">
							去做题
						</view>
					<!-- 	<view class="img">
							<image src="../../static/book11.png" mode=""></image>
						</view> -->
					</view>
					<view class="writing" @click="goRankList">
						<view class="writing-title">
							排名
						</view>
						<view class="writing-detail">
							坚持天数、刷题总数、正确率排名
						</view>
					</view>
					<!-- <view class="current-politics" @click="goPolitics">
						<view class="politics-title">
							时政内容
						</view>
						<view class="politics-detail">
							最新时政内容，掌握最新知识
						</view>
						
					</view> -->
				</view>
			</view>
			<view class="uni-margin-wrap" @click="goDocard" >
				<view class="swiper-text">
					参加打卡活动<br />最高可获得230元
				</view>
						<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="true" interval="3000"
							:duration="duration">
							<swiper-item>
								<image src="https://pic.imgdb.cn/item/6691f300d9c307b7e9a65b20.png" mode=""></image>
							</swiper-item>							
						</swiper>
					</view>
			<!-- <view class="home-bottom">
				<view class="wrong">
					错题
				</view>
				<view class="collect">
					收藏
				</view>
				<view class="note">
					笔记
				</view>
			</view> -->

		</view>
		<view class="notice">
			
		</view>
		<uni-popup ref="noticePopup" class="noticePopup" background-color="#fff" @change="change">
			<view class="noticePopupcontent">
				<view class="img">
					<image src="../../static/new.png" mode=""></image>
				</view>
				<view class="title">
					最新通知
				</view>
				<view v-html="Vhtml" class="content"></view>
				<!-- 含税单价发哈几十块觉得 -->
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import { onShow ,onLoad,onHide} from "@dcloudio/uni-app" 
	import util from '../../util/index.js'
	import {ref} from 'vue'
	import moment from "moment";
	const noticePopup = ref()
	const userInfo = ref({
		day:0,
		done:0,
		correct:0
	})
	const day = ref(0)
	const Vhtml = ref('')
	onHide(() => {
		noticePopup.value.close();
	})
	onShow(() => {
		
		const userInfo = uni.getStorageSync('userInfo')
		const date1 = moment('2025-12-20')
		const date2 = moment(new Date())
		day.value = date1.diff(date2,"days")
		if(userInfo.openid) {
			getUserInfo(userInfo.openid)
		}
	})
	onLoad(() => {
		getNotice()
	})
	const goRankList = () => {
		uni.navigateTo({
			url: '/pages/rank/rank'
		})
	}
	const getNotice = () => {
		uni.request({
			url:util.baseUrl + '/wxapi/notice/newNotice',
			method:'GET',
			success:(res) => {
				if( res.data.code == 200) {
					//userInfo.value = res.data.data
					// let noticeTime = uni.getStorageSync('noticeTime')

					// console.log('jinru',noticeTime)
					Vhtml.value = res.data.data.content
					console.log('jinru')
					setTimeout(() => {
						noticePopup.value.open();
					}, 300);
					// if(noticeTime != res.data.data.createTime) {  // 展示提示 并且把最新的noticeTime存进缓存
					// 	uni.setStorageSync('noticeTime',res.data.data.createTime)
						
					// }
					// 判断是否展示信息 用更新日期与本地缓存日期对比
					
					
				}
				
			}
		})
	}
	const getUserInfo = (openid) => {
		uni.request({
			url:util.baseUrl + '/wxapi/user/getUserInfo',
			method:'GET',
			data:{
				openid,
			},
			success:(res) => {
				if( res.data.data) {
					userInfo.value = res.data.data
					uni.setStorageSync('userInfo', res.data.data);
				}
				
			}
		})
		
	}
	const goPolitics = () => {
		uni.navigateTo({
			url: '/pages/writingList/writingList'
		})
	} 
	const goStrengthen = ()=> {
		uni.navigateTo({
			url: '/pages/strengthenList/strengthenList'
		})
	}
	const goWritingList = () => {
		const userInfo = uni.getStorageSync('userInfo')
		if(userInfo._id) {
			uni.request({
				url:util.baseUrl + '/wxapi/wxQuestion/getSeries',
				method:'GET',
				success:(res) => {
					console.log('成功')
					const data = res.data.data.filter((item) => {
						return item.label == '历年真题'
					});
					
					const ids = {
						teacherId:data[0].value,
						seriesId:data[0].children[0].value
					}
					const idsStr = JSON.stringify(ids)
					uni.navigateTo({
						url: `/pages/contentList/contentList?ids=` + idsStr + '&label=历年真题'
					})
				},
				fail:()=>  {
					console.log('失败')
				}
			})
		}else {
			uni.showModal({
				title: '提示',
				content: '检测到未登录，登录后免费享受真题享受服务',
				success: function(res) {
					if (res.confirm) {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		}
			
		
		
	}
	const getSection = () => {
		uni.request({
			url:util.baseUrl + '/wxapi/wxQuestion/getSection',
			method:'GET',
			success:(res) => {
				console.log('成功')
				tableList.value = res.data.data;
			},
			fail:()=>  {
				console.log('失败')
			}
		})
	}
	const goDocard = () => {
		const userInfo = uni.getStorageSync("userInfo");
		if (!userInfo.openid) {
			uni.showModal({
				title: "提示",
				content: "检测到未登录，登录后享受服务",
				success: function(res) {
					if (res.confirm) {
						uni.navigateTo({
							url: "/pages/login/login",
						});
					} else if (res.cancel) {
						console.log("用户点击取消");
					}
				},
			});
		} else {
			uni.navigateTo({
				url: "/pages/doCard/doCard",
			});
		}
	}
	
</script>
<style lang="scss">
	.uni-popup__wrapper {
		border-radius: 20rpx;
	}
	.noticePopupcontent {
		position: relative;
		padding: 20rpx;
		width: 500rpx;
		min-height: 200rpx;
		.img {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			width: 50rpx;
			height: 50rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.title {
			font-weight: 700;
			position: absolute;
			left: 50%;
			top: 70rpx;
			transform: translateX(-50%);
		}
		.content {
			// position: absolute;
			margin-top: 100rpx;
		}
	}
	@keyframes slide {
		0% {
			transform: translateX(0);
		}

		100% {
			transform: translateX(-100%);
		}
	}
	
	.home {
		background-color: #fee793;

		.top {
			height: 290rpx;
			font-weight: 700;
			background: linear-gradient(to bottom, #fcd22e, #fee793);

			.top-day {
				margin-left: 15rpx;
			}

			.carousel {
				overflow: hidden;
				position: relative;
				width: 100%;
				height: 160rpx;
				white-space: nowrap;
			}

			.carousel-text {
				font-size: 25rpx;
				font-weight: 400;
				color: #fff;
				padding: 10rpx 30rpx;
				background-color: #e4bd31;
				margin-right: 20rpx;
				border-radius: 40rpx;
			}

			.carousel-row1 {
				position: absolute;
				top: 10rpx;
				animation: slide 40s linear infinite;
			}

			.carousel-row2 {
				position: absolute;
				top: 80rpx;
				animation: slide 40s linear infinite;
			}
		}

		.body {

			position: relative;
			height: calc(100vh - 290rpx);
			border-top-left-radius: 40rpx;
			border-top-right-radius: 40rpx;
			// border-radius: 40rpx;
			background-color: #fff;
		}

		.swiper {
			width: 640rpx;
			margin: 10rpx auto;
			image {
				width: 100%;
				height: 250rpx;
			}
		}
		.body-content {
			height: 700rpx;
		}
		.body-top {
			font-size: 28rpx;
			display: flex;
			justify-content: space-evenly;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			height: 130rpx;
			background: linear-gradient(to bottom, #fbf7d8, #fdfdfd);
			width: 600rpx;
			top: -90rpx;
			padding: 0rpx 20rpx;
			padding-top: 30rpx;
			border-radius: 20rpx;
			box-shadow: 2rpx 2rpx 2rpx 2rpx #fdfcf9;

			.number {
				font-weight: 700;
				font-size: 50rpx;
			}

			.unit {
				font-weight: 700;
			}

			.text-content {
				margin-top: 20rpx;
				text-align: center;
			}
		}

		.body-content {
			position: relative;

			.famous-teachers {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				height: 220rpx;
				width: 600rpx;
				padding: 20rpx 20rpx;
				border-radius: 20rpx;
				
				background:url(https://pic.imgdb.cn/item/6691f356d9c307b7e9a6b7ee.png) no-repeat;
				background-size:100% 100%;
				top: 100rpx;
				
				color:#b0aaa3;
				font-size: 26rpx;
				.img {
					width: 180rpx;
					height: 180rpx;
					margin-top: 20rpx;
					margin-left: 10rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.famous-teacher-title {
					position: absolute;
					top: 30rpx;
					left: 280rpx;
					color:#1c0435;
					font-size: 34rpx;
					font-weight: 700;
				}
				.famous-teacher-detail {
					position: absolute;
					top: 80rpx;
					left: 280rpx;
				}
				
				.famous-teacher-button {
					position: absolute;
					bottom: 50rpx;
					right: 100rpx;
					width: 200rpx;
					height: 70rpx;
					line-height: 70rpx;
					border-radius: 35rpx;
					text-align: center;
					font-size: 30rpx;
					color: #371636;
					font-weight: 700;
					background-color: #fed41e;
				}
			}

			.body-middle {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				height: 300rpx;
				width: 640rpx;
				top: 390rpx;

				.prediction {
					position: relative;
					border-radius: 20rpx;
					height: 300rpx;
					width: 320rpx;
					background: url(https://pic.imgdb.cn/item/6691f35cd9c307b7e9a6bd3e.png) no-repeat;
					background-size:100% 100%;
					box-shadow: 2rpx 2rpx 2rpx 2rpx #edeffe;
					
					font-size: 26rpx;
					overflow: hidden;
					.img {
						margin-top: 30rpx;
						margin-left: 20rpx;
						width: 120rpx;
						height: 120rpx;
						image {
							width: 100%;
							height: 100%;
						}
					}
					.prediction-title {
						position: absolute;
						left: 20rpx;
						top: 30rpx;
						color:#1c0435;
						font-size: 34rpx;
						font-weight: 700;
					}
					.prediction-detail {
						position: absolute;
						left: 20rpx;
						top: 80rpx;
						width: 200rpx;
					}
					.prediction-button {
						position: absolute;
						bottom: 50rpx;
						right: 50%;
						transform: translateX(50%);
						width: 200rpx;
						height: 70rpx;
						line-height: 70rpx;
						border-radius: 35rpx;
						text-align: center;
						font-size: 30rpx;
						color: #371636;
						font-weight: 700;
						background-color: #fed41e;
					}
				}

				.writing {
					position: absolute;
					right: 0;
					top: 0;
					border-radius: 20rpx;
					width: 300rpx;
					height: 140rpx;
					// background: linear-gradient(to left, #ffe3df, #fff1ee);
					background: url(https://pic.imgdb.cn/item/6691f360d9c307b7e9a6c288.png) no-repeat;
					background-size:100% 100%;
					box-shadow: 2rpx 2rpx 2rpx 2rpx #ffe3df;
					color:#753d30;
					font-size: 26rpx;
					.writing-title {
						margin-top: 10rpx;
						margin-left: 20rpx;
						font-size: 32rpx;
						font-weight: 700;
						color: #753d30;
					}
					.writing-detail {
						margin-left: 20rpx;
					}
				}

				.current-politics {
					position: absolute;
					right: 0;
					bottom: 0;
					border-radius: 20rpx;
					width: 300rpx;
					height: 140rpx;
					background: linear-gradient(to left, #deeefd, #edf8fe);
					background:url(https://pic.imgdb.cn/item/6691f35ed9c307b7e9a6bfa2.png) no-repeat;
					background-size:100% 100%;
					//border: 2rpx solid #ffe3df;
					box-shadow: 2rpx 2rpx 2rpx 2rpx #deeefd;
					color:#225273;
					font-size: 28rpx;
					.politics-title {
						margin-top: 10rpx;
						margin-left: 20rpx;
						font-size: 32rpx;
						font-weight: 700;
						color: #225273;
					}
					.politics-detail {
						margin-left: 20rpx;
					}
				}
			}
		}

		.home-bottom {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			justify-content: space-between;
			width: 640rpx;
			height: 280rpx;
			top: 710rpx;

			.wrong,
			.collect,
			.note {
				background-color: #ffffff;
				width: 197rpx;
				height: 250rpx;
				border-radius: 20rpx;
				border: 3rpx solid #f5f5f5;
				box-shadow: 4rpx 4rpx 4rpx 4rpx #f5f5f5;
			}
		}
		.uni-margin-wrap {
			position: relative;
			.swiper-text {
				font-weight: 700;
				color: #fcd22e;
				position: absolute;
				z-index: 9;
				top: 80rpx;
				left: 150rpx;
			}
		}
	}
</style>